<template>
  <div class="dashboard-container">
    <el-row :gutter="20" style="">
      <el-col :span="24">
        <el-card shadow="never" style="background: #134e66;color: #fff;padding: 5px 0 0 5px;border-radius: 10px;">
          <el-row :gutter="20" style="margin-bottom: 5px;">
            <el-col :span="19">
              <div style="font-size: 36px;">{{marketName}} - 第{{valueDate}}季度经营季报</div>
            </el-col>
            <el-col :span="5">
              <el-select v-model="valueDate" @change="changeDate" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 150px;">
                <el-option :key="1" label="第一季度" :value="1"></el-option>
                <el-option :key="2" label="第二季度" :value="2"></el-option>
                <el-option :key="3" label="第三季度" :value="3"></el-option>
                <el-option :key="4" label="第四季度" :value="4"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <p style="font-size: 18px; margin-top: 10px;">交易报表</p>
    <el-card shadow="never" style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;">
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">本季交易额（万元）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{(todaySales.Sales/1000000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.Sales/1000000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{Math.round((todaySales.Sales-yesterdaySales.Sales)/yesterdaySales.Sales*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季交易目标完成情况</div>
            <div style="font-size: 38px;padding-top: 5px;">
              <el-progress width=80 type="circle" :stroke-width="3" :percentage="salesRat"></el-progress>
              <!-- <el-progress type="circle" :stroke-width="3" :percentage="salesRat"></el-progress> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季交易笔数（万笔）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{(todaySales.DocCount / 10000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.DocCount / 10000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{Math.round((todaySales.DocCount-yesterdaySales.DocCount)/yesterdaySales.DocCount*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季交易量（吨）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{(todaySales.Weight/1000000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.Weight/1000000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{Math.round((todaySales.Weight-yesterdaySales.Weight)/yesterdaySales.Weight*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季客单价（元）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{Math.round(todaySales.PCT)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{Math.round(yesterdaySales.PCT)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{Math.round((todaySales.PCT-yesterdaySales.PCT)/yesterdaySales.PCT*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">会员交易额（万元）</div>
            <div style="padding: 5px 0;font-size: 24px;">0</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">0</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">0%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          交易额趋势
          </p>
          <chart :options="jiaoyiequshioptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          交易量趋势
          </p>
          <chart :options="jiaoyiliangqushioptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
    </el-row>

     <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          品类交易额分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="pinleijiaoyiefenxioptions" style="height: 325px; margin: -30px 0px -10px -30px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
             <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in pinleijiaoyieData.chartArr1"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          品类交易量分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="pinleijiaoyiliangfenxioptions" style="height: 325px; margin: -30px 0px -10px -30px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
            <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
              <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in pinleijiaoyieData.chartArr2"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          品类客单价分析
          </p>
          <chart :options="pinleikeydanjiaoptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          交易峰值分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="jiaoyifengzhifenxioptions" style="height: 325px; margin: -30px 0px -10px -30px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
              <ul style="list-style: none;height: 248px;padding: 40px 0 0;">
                <li
                  v-for="item in jiaoyifengzhifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}%</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          单品交易额分析
          </p>
          <chart :options="danpinjiaoyieoptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          单品交易量分析
          </p>
          <chart :options="danpinjiaoyiliangoptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
    </el-row>


    <p style="font-size: 18px; margin-top: 10px;">客流报表</p>
    <el-card shadow="never" style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;">
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">本季总客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{todayPeopleNumber.totalFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季客流目标完成情况</div>
            <div style="font-size: 38px;padding-top: 5px;">
              <el-progress width=80 type="circle" :stroke-width="3" :percentage="peopleRat"></el-progress>
              <!-- <el-progress type="circle" :stroke-width="3" :percentage="peopleRat"></el-progress> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季去重客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{todayPeopleNumber.totalRemoveFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalRemoveFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalRemoveFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季新客客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{todayPeopleNumber.totalNewFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalNewFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalNewFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季回头客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{todayPeopleNumber.totalIntervalFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalIntervalFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalIntervalFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">会员客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">0</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">0</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">0%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="18">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          客流趋势
          </p>
          <chart :options="keliuqushioptions" style="height: 325px; margin: -30px 0px -30px 0px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          客流漏斗
          </p>
          <chart :options="keliuloudouoptions" style="height: 325px; margin: -30px 0px -30px 0px;"></chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          客群画像
          </p>
          <el-row>
            <el-col :span="18">
              <chart :options="kequnhuaxiangoptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
            </el-col>
            <el-col :span="6">
              <div style="font-size: 14px;padding-left: 10px;">
                <div style="margin: 45px 0;">
                  <div style="padding-left: 40px;">
                    <img style="width: 50px;" src="../../../assets/ma.jpg" alt="">
                  </div>
                  <div>客流总数：{{maleNumber}}人</div>
                  <div>人群占比：{{malePct}}</div>
                </div>
                <div>
                  <div style="padding-left: 40px;">
                    <img style="width: 50px;" src="../../../assets/fa.jpg" alt="">
                  </div>
                  <div>客流总数：{{femaleNumber}}人</div>
                  <div>人群占比：{{femalePct}}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          客流峰值分析
          </p>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-row>
                <el-col :span="14">
                  <div style="position: relative">
                    <chart :options="keliufengzhifenxioptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
                  </div>
                </el-col>
                <el-col :span="10">
                   <ul style="list-style: none;height: 248px;padding: 40px 0 0;">
                    <li
                      v-for="item in keliufengzhifenxiData"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <chart :options="weekkeliufengzhifenxioptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="16">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          回访活跃度分析
          </p>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <chart :options="lastTimeOptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
                </el-col>
                <el-col :span="9">
                   <ul style="list-style: none;height: 248px;padding: 50px 0 0;">
                    <li
                      v-for="item in huifanghuoyuedufenxiData1"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <chart :options="lastTimeOptions2" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
                </el-col>
                <el-col :span="9">
                <ul style="list-style: none;height: 248px;padding: 0;">
                    <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">低频回头客</p>
                    <li
                      v-for="item in huifanghuoyuedufenxiData2.chartArr1"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                    <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">高频回头客</p>
                    <li
                      v-for="item in huifanghuoyuedufenxiData2.chartArr2"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          入口热力分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="rukourelifenxioptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in rukourelifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <p style="font-size: 18px; margin-top: 10px;">检测报表</p>
    <el-card shadow="never" style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;">
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">本季检测批次数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.batchTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.batchTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.batchTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季检测品种数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.categoryTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.categoryTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.categoryTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季检测摊位数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.businessTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.businessTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.businessTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季检测阳性数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.positiveTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.positiveTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.positiveTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">本季检测疑似阳性数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.positiveSuspectedTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.positiveSuspectedTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.positiveSuspectedTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">本季检测合格率</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.qualifiedTotal.toFixed(2)}}%</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">上季：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.qualifiedTotalPrevious.toFixed(2)}}%</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.qualifiedTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="18">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          检测趋势
          </p>
          <chart :options="jiancequshioptions" style="height: 325px; margin: -20px -100px -20px -100px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          检测品类分布
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="jiancepinleifenbuoptions" style="height: 325px; margin:-30px 0px -10px -20px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
             <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in jiancepinleifenbuData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          不合格产品分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="buhegechanpinoptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegechanpinfenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          不合格摊位分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="buhegetanweioptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegetanweifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
          不合格时间分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="buhegeshijianoptions" style="height: 325px; margin: -30px 0px -10px -20px;"></chart>
              </div>
            </el-col>
            <el-col :span="10">
             <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegeshijianfenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Chart from '@/components/Charts'
import { saleAmount, formatDate, formatDate2, formatDate5, trend } from '@/utils'
import Cookies from 'js-cookie'
import store from '@/store'

export default {
  name: 'home',
  components: {
    Chart
  },
  data(){
    return {
      rukourelifenxiData: [], // 入口热力分析
      jiancepinleifenbuData: [], // 检测品类分布
      pinleijiaoyieData: {}, // 品类交易额分析、量分析
      jiaoyifengzhifenxiData: [], // 交易峰值分析
      keliufengzhifenxiData: [], //客流峰值分析
      huifanghuoyuedufenxiData1: [], //回访活跃度分析1
      huifanghuoyuedufenxiData2: [], //回访活跃度分析2
      buhegechanpinfenxiData: [], //不合格产品分析
      buhegetanweifenxiData: [], //不合格摊位分析
      buhegeshijianfenxiData: [], //不合格时间分析

      marketName: '',

      salesRat: 0,
      peopleRat: 0,

      date: '', // 显示在标题上的

      dateValue: formatDate(new Date()), // 选择日期 日
      valueDate: 2,
     
      sort: 1, // 1: 金额，2：重量
      
      // 客群画像(人数)
      maleNumber: 0, //	int	男
      malePct: 0, // 男占比
      femaleNumber: 0, //	int	女
      femalePct: 0, // 女占比

      // 交易报表 数据看板
      todaySales:{
        Sales:0,
        DocCount:0,
        Weight:0,
        PCT:0
      },
      yesterdaySales:{
        Sales:0,
        DocCount:0,
        Weight:0,
        PCT:0
      },
      // 客流报表 数据看板
      todayPeopleNumber:{
        totalFlow: { //	json	本季总客流
          monthCount: 0, //	int	本季数量
          amountTrend: 0, //	string	环比
        },
        totalRemoveFlow: { //		json	本季去重客流
          monthCount: 0, //	int	本季数量
          amountTrend: 0, //	string	环比
        },
        totalNewFlow: { //		json	本季新客流
          monthCount: 0, //	int	本季数量
          amountTrend: 0, //	string	环比
        },
        totalIntervalFlow: { //		json	本季回头客流
          monthCount: 0, //	int	本季数量
          amountTrend: 0, //	string	环比
        }
      },
      yestodayPeopleNumber:{
        totalFlow: { //	json	本季总客流
          preMonthCount: 0, //	int	上季数量
        },
        totalRemoveFlow: { //		json	本季去重客流
          preMonthCount: 0, //	int	上季数量
        },
        totalNewFlow: { //		json	本季新客流
          preMonthCount: 0, //	int	上季数量
        },
        totalIntervalFlow: { //		json	本季回头客流
          preMonthCount: 0, //	int	上季数量
        }
      },
      // 检测报表 数据看板
      jiancebaobiao:{
        batchTotal: 0, //	int	本季检测批次
        batchTotalPrevious: 0, //	int	上个周检测批次
        batchTotalRate: 0, //	int	检测批次环比	未乘以100
        categoryTotal: 0, //	int	本季品类数
        categoryTotalPrevious: 0, //	int	上个周品类数
        categoryTotalRate: 0, //	int	品类环比	未乘以100
        businessTotal: 0, //	int	本季摊位数
        businessTotalPrevious: 0, //	int	上个周摊位数
        businessTotalRate: 0, //	int	摊位环比	未乘以100
        qualifiedTotal: 0, //	int	本季合格率	未乘以100
        qualifiedTotalPrevious: 0, //	int	上个周的合格率	未乘以100
        qualifiedTotalRate: 0, //	int	环比合格率	未乘以100
        positiveTotal: 0, //	int	阳性数
        positiveTotalPrevious: 0, //	int	上个月阳性数
        positiveTotalRate: 0, //	float	阳性数环比	未乘以100
        positiveSuspectedTotal: 0, //	int	疑似阳性
        positiveSuspectedTotalPrevious: 0, //	int	上个月疑似阳性
        positiveSuspectedTotalRate: 0, //	float	疑似阳性环比	未乘以100
      }
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      if(val != oldVal && oldVal != 0){
        // 切换市场时 更新 周报 title
        const marketData = JSON.parse(Cookies.get('MarketData'))
        let obj = {}
        obj = marketData.find((item)=>{ // 这里的 marketData 就是上面的数据源
          return item.id === val //筛选出匹配数据
        })
        this.marketName = obj.name
        let quarter = this.getCurrentQuarter()
        this.fetchData(quarter)
      }
    }
  },
  computed: {
    // ...mapGetters(['name']),
    ...mapState('home',['SALES_RAT','PEOPLE_RAT']),
    // 交易额趋势
    ...mapState('businessReport',[
      'jiaoyiequshioptions',
      'jiaoyiliangqushioptions',
      'pinleijiaoyiefenxioptions',
      'pinleijiaoyiliangfenxioptions',
      'pinleikeydanjiaoptions',
      'jiaoyifengzhifenxioptions',
      'danpinjiaoyieoptions',
      'danpinjiaoyiliangoptions',
      'keliuqushioptions',
      'kequnhuaxiangoptions',
      'rukourelifenxioptions',
      'jiancepinleifenbuoptions',
      'buhegechanpinoptions',
      'buhegetanweioptions',
      'buhegeshijianoptions',
      'jiancequshioptions',
      'keliuloudouoptions',
      'keliufengzhifenxioptions',
      'weekkeliufengzhifenxioptions',
      'lastTimeOptions',
      'lastTimeOptions2'
    ]),
    ...mapState('peopleNumber',['inRecentMonthOptions', 'optionsFrequencyDistributions'])
  },
  mounted(){
    const marketData = JSON.parse(Cookies.get('MarketData'))
    let obj = {}
    obj = marketData.find((item)=>{ // 这里的 marketData 就是上面的数据源
      return item.id === this.$store.state.app.marketId //筛选出匹配数据
    })
    this.marketName = obj.name
    // const marketData = JSON.parse(Cookies.get('MarketData'))
    // this.marketName = marketData[0].name
    let quarter = this.getCurrentQuarter()
    this.fetchData(quarter)
  },
  methods: {
    // 获取指定日期的前一天
    getNextDate(date, day) {
      let dd = new Date(date);
      dd.setDate(dd.getDate() + day);
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    fetchData(quarter){
      this.valueDate = quarter
      this.salesRat = this.SALES_RAT
      this.peopleRat = this.PEOPLE_RAT
      const marketId = store.state.app.marketId
      let quarters = this.genQuarterDates(quarter) // 本季 上季
      // console.log('quarters')
      // console.log(formatDate2(quarters[0]))  // 2020-05-01
      // console.log(formatDate2(quarters[1]))  // 2020-02-01

      const year = formatDate2(quarters[0]).slice(0,4)
      // const month = formatDate2(quarters[0]).slice(5,7)

      // let yesterdayYear = this.getLastYearYestdy()[0].slice(0,4)
      // let yesterdayMonth = this.getLastYearYestdy()[0].slice(5,7)

      const dateDay = formatDate2(quarters[0])
      const date = formatDate2(quarters[0])

      let yesterdayYear = year
      let yesterdayquarter = 0
      if(quarter === 1){
        yesterdayquarter = 4
        yesterdayYear = this.getLastYearYestdy()[0].slice(0,4)
      }else if (quarter === 2){
        yesterdayquarter = 1
      }else if (quarter === 3){
        yesterdayquarter = 2
      }else if (quarter === 4){
        yesterdayquarter = 3
      }


      // 交易报表 数据看板 sort 1 月 2 日 3 周 4 季度 5年
      this.fetchjiaoyibaobiao(year, '', '', '', quarter, yesterdayYear, '', '', '', yesterdayquarter, marketId, 4)
      // 交易额/量趋势
      this.getjiaoyiequshi(year, '', '', '', quarter, marketId, 4)
      // 品类交易额/量/客单价
      this.getpinleijiaoyie(year, '', '', '', quarter, marketId, 4)
      // 交易峰值分析
      this.getjiaoyifengzhi(year, '', '', '', quarter, marketId, 4)
      // 单品交易额/量分析
      this.getdanpinjiaoyie(year, '', '', '', quarter, marketId, 4)


      // 客流报表 数据看板
      this.getkeliubaobiao('', '', '', '', dateDay, 'quarter')

      // 客流趋势
      this.getkeliuqushi(date, 'quarter')

      // 客流漏斗(周度)
      this.getkeliuloudou('', '', dateDay, 'quarter')

      // 客群画像(图)
      this.getkequnhuaxiang('', '', dateDay, 'quarter')

      // 客群画像(人数)
      this.getkequnhuaxiangsex('', '', date, 'quarter')

      // 客流峰值分析(饼图)
      this.getkeliufengzhi(date, 'quarter')

      // 客流峰值分析(柱状图)
      this.getweekkeliufengzhi(date, 'quarter')

      // 回访活跃度分析(饼图1)
      this.getFrequentActivities('', date, 'quarter')

      // 回访活跃度分析(饼图2)
      this.getFrequentActivities2('', date, 'quarter')

      // 入口热力分析
      this.getrukourelifenxi('', '', date, 'quarter')


      // 检测报表 数据看板
      this.getjiancebaobiao(date, 'quarter')

      // 检测趋势
      this.getjiancequshi(date, 'quarter')

      // 检测品类分布
      this.getjiancepinleifenbu(date, 'quarter')

      // 不合格产品
      this.getbuhegechanpin(date, 'quarter')

      // 不合格摊位
      this.getbuhegetanwei(date, 'quarter')

      // 不合格时间
      this.getbuhegeshijian(date, 'quarter')

    },

    // 获取当年的前一年
    getLastYearYestdy(){
      let date = new Date();
      let y = date.getFullYear() - 1;// 减一是算去年时间，+ 1 是明年时间
      let m = date.getMonth();
      let d = date.getDate();
      let h= date.getHours();
      let minute = date.getMinutes();
      let s= date.getSeconds();
      let dateStrymd = y + '-' + (m + 1) + '-' + d
      let dateStrymdhms = y + '-' + (m + 1) + '-' + d + ' ' + h + 'h' + minute + 'm' + s + 's'
      return [dateStrymd, dateStrymdhms]
    },


    // 交易报表 数据看板
    fetchjiaoyibaobiao(
      year,
      month,
      day,
      week,
      quarter,
      yesterdayYear,
      yesterdayMonth,
      yesterdayDay,
      yesterdayWeek,
      yesterdayQuarter,
      marketId,
      sort
      ){
        this.$store.dispatch('businessReport/fetchjiaoyibaobiao', {
          year,
          month,
          day,
          week,
          quarter,
          yesterdayYear,
          yesterdayMonth,
          yesterdayDay,
          yesterdayWeek,
          yesterdayQuarter,
          marketId,
          sort
        }).then(
          data => {
            this.todaySales = data[0]
            this.yesterdaySales =data[1]
          }
        )
    },

    // 交易额/量趋势
    getjiaoyiequshi(year, month, day, week, quarter, id, sort){
      this.$store.dispatch('businessReport/fetchjiaoyiequshi', {year, month, day, week, quarter, id, sort})
    },

    // 品类交易额/量/客单价
    getpinleijiaoyie(year, month, day, week, quarter, id, sort){
      this.$store.dispatch('businessReport/fetchpinleijiaoyie', {year, month, day, week, quarter, id, sort}).then(
        data => {
         this.pinleijiaoyieData = data;
        }
      )
    },

    // 交易峰值分析
    getjiaoyifengzhi(year, month, day, week, quarter, id, sort){
      this.$store.dispatch('businessReport/fetchjiaoyifengzhi', {year, month, day, week, quarter, id, sort}).then(
        data => {
          this.jiaoyifengzhifenxiData = data;
        }
      )
    },

    // 单品交易额/量分析
    getdanpinjiaoyie(year, month, day, week, quarter, id, sort, flag){
      this.$store.dispatch('businessReport/fetchdanpinjiaoyie', {year, month, day, week, quarter, id, sort, flag})
    },


    // 客流报表
    getkeliubaobiao(year, month, yesterdayYear, yesterdayMonth, date, type){
      this.$store.dispatch('businessReport/fetchkeliubaobiao', {
        year, month, yesterdayYear, yesterdayMonth, date, type
      }).then(
        data => {
          this.todayPeopleNumber.totalFlow = data[0].totalFlow
          this.todayPeopleNumber.totalRemoveFlow = data[0].totalRemoveFlow
          this.todayPeopleNumber.totalNewFlow = data[0].totalNewFlow
          this.todayPeopleNumber.totalIntervalFlow = data[0].totalIntervalFlow
          this.yestodayPeopleNumber.totalFlow = data[1].totalFlow
          this.yestodayPeopleNumber.totalRemoveFlow = data[1].totalRemoveFlow
          this.yestodayPeopleNumber.totalNewFlow = data[1].totalNewFlow
          this.yestodayPeopleNumber.totalIntervalFlow = data[1].totalIntervalFlow
        }
      )
    },

    // 客流趋势
    getkeliuqushi(date, type){
      this.$store.dispatch('businessReport/fetchkeliuqushi', {date, type})
    },

    // 客流漏斗(周度)
    getkeliuloudou(year, month, date, type){
      this.$store.dispatch('businessReport/fetchkeliuloudou', {year, month, date, type})
    },

    // 客群画像(图)
    getkequnhuaxiang(year, month, date, type){
      this.$store.dispatch('businessReport/fetchkequnhuaxiang', {year, month, date, type})
    },

    // 客群画像(人数)
    getkequnhuaxiangsex(startDate, endDate, date, type){
      this.$store.dispatch('businessReport/fetchkequnhuaxiangsex', {startDate, endDate, date, type}).then(
        data => {
          this.maleNumber = data.maleNumber //	int	男
          this.femaleNumber = data.femaleNumber //	int	女
          this.malePct = ((data.maleNumber / data.totalNumber) * 100).toFixed() + '%' // 男占比
          this.femalePct = ((data.femaleNumber / data.totalNumber) * 100).toFixed() + '%' // 女占比
        }
      )
    },

    // 客流峰值分析(饼图)
    getkeliufengzhi(date, type){
      this.$store.dispatch('businessReport/fetchkeliufengzhi', {date, type}).then(
        data => {
          this.keliufengzhifenxiData = data;
        }
      )
    },

    // 客流峰值分析(柱状图)
    getweekkeliufengzhi(date, type){
      this.$store.dispatch('businessReport/fetchweekkeliufengzhi', {date, type})
    },

    // 回访活跃度分析(饼图1)
    getFrequentActivities(targetDate, date, type){
      this.$store.dispatch('businessReport/fetchFrequentActivities', {targetDate, date, type}).then(
        data => {
           this.huifanghuoyuedufenxiData1 = data;
        }).catch(err => {})
    },

    // 回访活跃度分析(饼图2)
    getFrequentActivities2(targetDate, date, type){
      this.$store.dispatch('businessReport/fetchFrequentActivities2', {targetDate, date, type}).then(
        data => {
          this.huifanghuoyuedufenxiData2 = data;
        }).catch(err => {})
    },

    // 入口热力分析
    getrukourelifenxi(startDate, endDate, date, type){
      this.$store.dispatch('businessReport/fetchrukourelifenxi', {startDate, endDate, date, type}).then(
        data => {
       this.rukourelifenxiData = data;
        }
      )
    },

    // 检测报表 数据看板
    getjiancebaobiao(date, type){
      this.$store.dispatch('businessReport/fetchjiancebaobiao', {date, type}).then(
        data => {
          this.jiancebaobiao = data
        }
      )
    },

    // 检测趋势
    getjiancequshi(date, type){
      this.$store.dispatch('businessReport/fetchjiancequshi', {date, type})
    },

    // 检测品类分布
    getjiancepinleifenbu(date, type){
      this.$store.dispatch('businessReport/fetchjiancepinleifenbu', {date, type}).then(
        data => {
         this.jiancepinleifenbuData = data;
        }
      )
    },

    // 不合格产品
    getbuhegechanpin(date, type){
      this.$store.dispatch('businessReport/fetchbuhegechanpin', {date, type}).then(
        data => {
          this.buhegechanpinfenxiData = data;
        }
      )
    },

    // 不合格摊位
    getbuhegetanwei(date, type){
      this.$store.dispatch('businessReport/fetchbuhegetanwei', {date, type}).then(
        data => {
         this.buhegetanweifenxiData = data;
        }
      )
    },

    // 不合格时间
    getbuhegeshijian(date, type){
      this.$store.dispatch('businessReport/fetchbuhegeshijian', {date, type}).then(
        data => {
          this.buhegeshijianfenxiData = data;
        }
      )
    },

    getCurrentQuarter(){
      let month = new Date().getMonth()
      if(month  < 3) {
             return 1;
         }else if(month < 6) {
             return 2;
         }else if(month <9) {
             return 3;
         }else if(month <12) {
             return 4;
         }
    },

    genQuarterDates(quarter) {
      // 选中季度的 年月日
      // 选中季度的上季度的 年月日
      let now =  new Date()
      let cYear = now.getFullYear() // 当前季度年
      let pYear = now.getFullYear() // 上一季度年
      let cQuarter = quarter // 当前季度
      let pQuarter = quarter - 1 // 上一季度
      if(pQuarter < 1){
        pQuarter = 4
        pYear -= 1
      }

      let cMonth = 4 // 当前季度月
      let pMonth = 1 // 上一季度月

      switch (cQuarter) {
        case 1:
          cMonth = 1
          break;
        case 2:
          cMonth = 4
          break;
        case 3:
          cMonth = 7
          break;
        case 4:
          cMonth = 10
          break;
      }

      switch (pQuarter) {
        case 1:
          pMonth = 1
          break;
        case 2:
          pMonth = 4
          break;
        case 3:
          pMonth = 7
          break;
        case 4:
          pMonth = 10
          break;
      }

      let cDate = new Date(cYear, cMonth, 1, 0,0,0,0)
      let pDate = new Date(pYear, pMonth, 1, 0,0,0,0)

      return [cDate, pDate]
    },

    getPreMonth(date) { // 获取当前选中月份的上个月
      let arr = date.split('-');
      let year = arr[0]; //获取当前日期的年份
      let month = arr[1]; //获取当前日期的月份
      let day = arr[2]; //获取当前日期的日
      let days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      let year2 = year;
      let month2 = parseInt(month) - 1;
      if (month2 == 0) {
          year2 = parseInt(year2) - 1;
          month2 = 12;
      }
      let day2 = day;
      let days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
          day2 = days2;
      }
      if (month2 < 10) {
          month2 = '0' + month2;
      }
      let t2 = year2 + '-' + month2 + '-' + day2;
      let t1 = year2 + '-' + month2
      return [t1, t2];
    },
    // 改变日期
    changeDate(val){
      console.log(val)
      this.fetchData(val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

